<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
<script type="text/babel">
    // 函数组件  类组件
    // 类组件注意：
    // 1- 类组件必须要继承React.Component
    // 2- 类组件当中必须要指定函数render
    // 3- 类组件可以借助render指定渲染的内容。（render返回的内容即是该组件要渲染的内容）
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    {
        // 1- 声明类
        // 2- 继承React.Component
        // class App extends React.Component{
        //     render(){
        //         // undefined null true false  不会进行任何渲染
        //         // return undefined;
        //         // return null;
        //         // return true;
        //         // return false;
        //
        //         // 返回的如果是一个数组,那么数组中的元素会被直接展开
        //         // return [1,2,3,4];
        //
        //         // 不允许返回对象(虚拟DOM对象除外)
        //         // return {
        //         //     a:1,
        //         //     b:2,
        //         //     c:3
        //         // }
        //
        //         // 不支持函数
        //         // return function(){
        //         //
        //         // }
        //
        //         // 一般 情况下组件返回的内容是虚拟DOM(jsx),如果你不想渲染内容一般返回的是false,null
        //         // return false;
        //
        //         // 如果返回的内容较多,建议直接将返回的内容放置在()内.
        //         return (
        //             <div>
        //                 <p>1</p>
        //                 <p>2</p>
        //             </div>
        //         )
        //     }
        // }
        // root.render(<App/>)
    }
    {
        // 2- 如果要创建多个组件可以采用以下形式.
        // const Component = React.Component;
        // const {Component} = React;
        // class App extends Component {
        //     render(){
        //         return (
        //             <div>
        //                 <h3>App</h3>
        //             </div>
        //         )
        //     }
        // }
        // root.render(<App/>)
    }
    {
        // 3
        // class App extends React.Component{
        //
        // }

        const App = class extends React.Component{
            render(){
                return (
                    <div>
                        <h3>App</h3>
                    </div>
                )
            }
        }
        root.render(<App/>)
    }
</script>
</html>